// 导入 react 和 react-dom
import React from 'react';
// React18 写法，多了 /client
import ReactDOM from 'react-dom/client';

/* 
  列表渲染：都是利用 JS 语法本身特点实现。
    1. 核心语法是数组的 map 方法，把数组映射成虚拟DOM列表
    2. 绑定 key 属性提高排序效率，key={唯一标识}
*/

const songs = ['温柔', '倔强', '私奔到月球', '私奔到地球'];

// const list = songs.map((item) => <li>{item}</li>);
// const title = (
//   <div>
//     <ul>{list}</ul>
//   </div>
// );

const title = (
  <div>
    <ul>
      {songs.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  </div>
);

// 渲染react元素，React18写法，先创建跟节点，再渲染
ReactDOM.createRoot(document.getElementById('root')).render(title);
